<template>
  <div class="mainpage" id="mainpage">
    <!-- 首页
    <br>
    <router-link class="zrouter" :to="{path: 'test'}">test</router-link>
    <router-link class="zrouter" :to="{path: 'test2'}">test2</router-link> -->
    <!-- <cube-button @click="scanQRCode">扫码</cube-button> -->
    <cube-page type="button-view" title="首页" :zback="false">
      <div slot="content">
        <div ref="slideWrapper" class="slide-container">
          <cube-slide
            ref="slide"
            :data="items"
            :initial-index="initialIndex"
            :loop="loop"
            :auto-play="autoPlay"
            :interval="interval"
            :threshold="threshold"
            :speed="speed">
            <template v-if="dotsSlot" slot="dots" slot-scope="props">
              <span class="my-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
            </template>
          </cube-slide>
        </div>

        <div class="zui-flex zgrid">
          <div class="item" v-for="(v, index) in menus" :key="index">
            <div class="itemInner">
              <router-link class="zui-flex-center zrouter" :to="{path: v.url}">
                <img :src="v.image" class="icon">
                <span>{{v.tit}}</span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </cube-page>
    <cube-view></cube-view>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import { zloginInfo, zjsSdk } from '@/util/api';
import wx from 'weixin-js-sdk';

import CubeView from '@/components/cube-view'
import CubePage from '@/components/cube-page'

var notify = null;

export default {
  name: 'Home',
  components: {
    CubeView, CubePage
  },
  provide () {
    return {
      reloadPage: this.reloadPage
    }
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      showLoading: true,
      items: [
        {
          image: require("@/assets/banner1.png")
        },
        {
          image: require("@/assets/banner2.jpg")
        }
      ],
      loop: true,
      autoPlay: true,
      interval: 5000,
      threshold: 0.3,
      speed: 400,
      allowVertical: false,
      initialIndex: 1,
      dotsSlot: false,
      menus: [
        {
          image: require("@/assets/1.png"),
          tit: '缺货反馈',
          url: '/shortage'
        },
        {
          image: require("@/assets/2.png"),
          tit: '高毛利品种',
          url: '/profit'
        },
        {
          image: require("@/assets/5.png"),
          tit: '滞销品种',
          url: '/unmarketable'
        },
        {
          image: require("@/assets/7.png"),
          tit: '库存',
          url: '/inventory'
        },
        {
          image: require("@/assets/8.png"),
          tit: '订单(客户)',
          url: '/order'
        },
        {
          image: require("@/assets/8.png"),
          tit: '订单',
          url: '/order/orderList/0'
        },
        {
          image: require("@/assets/8.png"),
          tit: '订单(品种)',
          url: '/order/orderordeail'
        },
        {
          image: require("@/assets/9.png"),
          tit: 'SVC查询',
          url: '/svc'
        },
        {
          image: require("@/assets/10.png"),
          tit: '采购项目',
          url: '/projects'
        },
        {
          image: require("@/assets/11.png"),
          tit: '大石头客户预测',
          url: '/forecast'
        },
        {
          image: require("@/assets/3.png"),
          tit: '涨价信息',
          url: '/test'
        },
        {
          image: require("@/assets/4.png"),
          tit: '新品信息',
          url: '/test'
        },
        {
          image: require("@/assets/6.png"),
          tit: '需配合信息',
          url: '/test'
        },
        {
          image: require("@/assets/12.png"),
          tit: '业务员沟通',
          url: '/communicate'
        }
      ]
    }
  },
  created () {
    let openid = this.zutil.getQueryString("openid");
    if(openid){
      this.zutil.lStorage.setParam('zuiopenid', openid);
    }
    this.initPages();
  },
  mounted() {

  },
  watch: {

  },
  methods: {
    ...mapMutations(['setLoginUserInfo']),
    reloadPage () {
      this.leftReady = false;
      this.$nextTick(() => (this.leftReady = true));
    },
    isWeiXin() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
      } else {
        return false;
      }
    },
    initPages () {

      // this.checkJsApi();

      return false;
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: '', // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名
        jsApiList: [] // 必填，需要使用的JS接口列表
      });
    },
    async checkJsApi () {
      // if(this.isWeiXin()){
        let tbl_param = {
          url: encodeURIComponent(location.href.split('#')[0]),
          jsapistr: 'getLocation'
        }
        let res = await zjsSdk(tbl_param);
        res = this.zutil.formatAxiosData(res);
        if(res.code == '0000'){
          console.log(res)
          wx.config({
            debug: false,
            appId: res.data.appId,
            timestamp: res.data.timestamp,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            jsApiList: ['getLocation']
          });

          wx.error(function (res) {
            console.log('验证失败返回的信息:', res);
          });

          wx.ready(function() {
            console.log('微信jssdk初始化成功');

          })
        }
      // }
    },
    scanQRCode () {
      wx.scanQRCode({
        needResult: 1,
        desc: 'scanQRCode desc',
        success: function (res) {
          console.log(res);
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.slide-container{
  height: 160px;
  margin-bottom: 10px;
  transform: translateZ(0px);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 2px 9px #ddd;

  /deep/ {
    .cube-slide-item{
      img{
        width: 100%;
      }
    }
    .cube-slide-dots{
      .my-dot{
        height: auto;
        font-size: 12px;
        background: none;
        &.active{
          color: #fc9153;
        }
      }
    }
  }
}
.zgrid {
  flex-wrap: wrap;
  padding: 4px;
  .item {
    width: 33.3333%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    padding: 4px;

    .itemInner {
      width: 100%;
      height: 100%;
      .zrouter {
        background: #fff;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-radius: 6px;

        .icon {
          width: 70px;
          height: 70px;
          margin-top: 10px;
        }

        span {
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 13px;
          color: #000;
        }
      }
    }
  }
}
</style>
